<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="header">
        <div class="box">
          <div class="title">可提现金额</div>
          <div class="button">{{ balance }}</div>
        </div>
        <div class="box">
          <div class="title">满1元即可申请提现</div>
          <div class="button">
            <el-button type="primary" @click="withdrawal">个人提现</el-button>
            <el-button type="primary" plain>企业开票提现</el-button>
          </div>
        </div>
      </div>
      <div class="article">
        <p>1、满1元即可提现，提现中遇到任何问题请联系客服处理</p>
        <p>
          2、如果您不开发票点击(个人提现]按钮进行余额提现，提现账号设置为个人支付宝或者银行卡，设置错误可能会影打款进度，如有疑问可联系客服
        </p>
        <p>
          3、如果您可以开具增值税专用发票，点击[企业开票提现]按钮先进行开具对应发票，提现账号设置为对公账户，按开票金额进行开票，投递发票到后我们会退还”代扣税费"到您余额，一并打款到您的对应账号，如有疑问可联系客服。
        </p>
      </div>
      <div class="section">
        <!-- 列表 -->
        <el-table v-loading="loading" :data="list">
          <el-table-column label="申请单号" align="center" prop="appId" />
          <el-table-column label="收款人" align="center" prop="accountName" />
          <el-table-column
            label="收款账号"
            align="center"
            prop="accountNubmer"
          />
          <el-table-column
            label="提现金额"
            align="center"
            prop="cashOutAmount"
          />
          <el-table-column
            label="收款方式"
            align="center"
            prop="onlineVersion"
          />
          <el-table-column
            label="审核状态"
            align="center"
            prop="developmentVersion"
          />
          <el-table-column label="申请时间" align="center" prop="applyTime">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.applyTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="支付时间"
            align="center"
            prop="createTime"
            width="180"
          >
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog
      title="个人提现"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div style="display: flex">
        <el-input v-model="withdrawalBalance" placeholder=""></el-input>
        <el-button
          type="primary"
          @click="allWithdrawals"
          plain
          style="margin-left: 10px"
          >全部提现</el-button
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="bandWithdrawal">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAccount,
  applyCost,
  getAccountRecords,
} from "@/api/distribute/order";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "NamesIndex",

  data() {
    return {
      balance: 0.0,
      authorizeInfo: {},
      sysUserId: null,
      loading: false,
      list: [],
      total: 0,
      dialogVisible: false,
      withdrawalBalance: 0.0,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        userId: "",
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    withdrawal() {
      this.dialogVisible = !this.dialogVisible;
    },
    async getUserInfo() {
      const that = this;
      getUserProfile().then((response) => {
        this.userId = response.data.id;
        this.queryParams.userId = response.data.id;
        that.getAccountNums();
        if (response.data.id) {
          that.getList();
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    allWithdrawals() {
      this.withdrawalBalance = this.balance;
    },
    // 获取余额
    getAccountNums() {
      console.log("11111111111111");
      let reqBody = {
        userId: this.userId,
      };
      getAccount(reqBody)
        .then((res) => {
          console.log("获取余额", res);
          this.balance = res.data.totalAmount;
        })
        .catch((err) => {});
    },
    // 发起提现
    bandWithdrawal() {
      const that = this;
      if (this.withdrawalBalance <= 0) {
        this.$message({
          message: "提现金额不能小于0",
          type: "warning",
        });
        return;
      } else {
        const reqBody = {
          userId: that.userId,
          cashOutAmount: that.withdrawalBalance,
        };
        applyCost(reqBody).then((res) => {
          console.log("发起提现", res);
          if (res.code == 0) {
            this.$message({
              message: "提现成功",
              type: "success",
            });
          }
        });
      }
    },
    // 获取提现列表
    getList() {
      // queryParams
      getAccountRecords(this.queryParams).then((res) => {
        console.log("获取提现记录", res);
        this.list = res.data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    .box {
      padding: 24px;
      .button {
        padding-top: 20px;
      }
    }
  }
  .article {
    margin-top: 24px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    padding: 8px 15px 8px 37px;
    border-radius: 4px;
  }
  .section {
    margin-top: 24px;
  }
}
</style>
